<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 580px;
            height: 470px;
            margin: 150px auto;
            background-color: teal;
            position: relative;
            overflow: hidden;
        }
        .box img{
            width: 580px;
            height: 470px;
        }
        .box-slide{
            width: 2900px;
            height: 470px;
            position: absolute;
            display: flex;
            z-index: 1;
            transition: all .3s;
            cursor: pointer;
        }
        .btnLeft,.btnRight{
            width: 30px;
            height: 30px;
            background-color: teal;
            position: absolute;
            z-index: 2;
            top: 50%;
            cursor: pointer;
        }
        .btnLeft{
            left: 0;
        }
        .btnRight{
            right: 0;
        }
        ul{
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 30px;
        }
        ul>li{
            cursor: pointer;
            list-style: none;
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #aaa;
            z-index: 3;
            margin-right: 5px;
        }
        .crueent{
            background-color: #fff;
        }
    </style> 
    <script src="../../day6jquery/jquery3.5.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="btnLeft"></div>
        <div class="box-slide" style="left: 0px;">
            <img src="./slice1.png">
            <img src="./slice2.png">
            <img src="./slice3.png">
            <img src="./slice4.png">
            <img src="./slice5.png">
        </div>
        <div class="btnRight"></div>
        <ul class="stop">
            <li class="crueent"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        let boxSlide = document.querySelector('.box-slide');
        let timeStatus = null;
        let index = 0;
        // slideStatus()
        function slideStatus(){
            timeStatus = setInterval(function(){
                left()
            },1000)
        }
        function left(){
            let leftStatus = 0;
            index++;
            if(index > 4)index=0
            $('.stop li:eq('+index+')').addClass('crueent').siblings().removeClass('crueent');
            if(boxSlide.style.left === '-2320px'){
                leftStatus = 0;
            }else{
                leftStatus = parseInt(boxSlide.style.left) -580;
                console.log(leftStatus)
            }
            boxSlide.style.left = leftStatus +'px'
        }
        function right(){
            let rightStatus = 0;
            index--;
            if(index < 0) index = 4
            $('.stop li:eq('+index+')').addClass('crueent').siblings().removeClass('crueent');
            if(boxSlide.style.left === '0px'){
                rightStatus = -2320;
            }else{
                rightStatus = parseInt(boxSlide.style.left) + 580;
                console.log(rightStatus)
            }
            boxSlide.style.left = rightStatus +'px'
        }
        $('.btnLeft').click(function(){
            left()
        })
        $('.btnRight').click(function(){
            right()
        })
        $('.box').hover(function(){
            clearInterval(timeStatus)
        },function(){
            slideStatus();
        })
        
        $('.stop li').click(function(){
            console.log();
            $(this).addClass('crueent').siblings().removeClass('crueent');
            boxSlide.style.left = parseInt(-index * 580) + 'px';
            console.log(index)
        })
    </script>
</body>

</html>